<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path: '/teacher/notices'}">教师</el-breadcrumb-item>
      <el-breadcrumb-item>学生课题管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path: '/teacher/assignment'}">教师发布任务书</el-breadcrumb-item>
      <el-breadcrumb-item v-if="assignment.status === 1">填写任务书</el-breadcrumb-item>
      <el-breadcrumb-item v-else>查看任务书</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图区域--> 
    <el-card>
      <el-link style="margin-left:400px; font-size:20px;font-weight:bold" type="primary" :underline="false" @click.native="dialogVisible = true">查看课题详情: {{subjectDetail.name}}</el-link>
      <el-form :model="assignment" :rules="rules" ref="formRef" label-width="200px" style="margin-top:50px">  
        <el-form-item label="研究的主要内容" prop="research">
          <el-input v-model="assignment.research" type="textarea" :rows="5"></el-input>
        </el-form-item>
        <el-form-item label="涉及的知识和基本要求" prop="command">
          <el-input v-model="assignment.command" type="textarea" :rows="5"></el-input>
        </el-form-item>
        <el-form-item label="预期目标" prop="goal">
          <el-input v-model="assignment.goal" type="textarea" :rows="5"></el-input>
        </el-form-item>
        <el-form-item label="进度安排" prop="scheduling">
          <el-input v-model="assignment.scheduling" type="textarea" :rows="5"></el-input>
        </el-form-item> 
      </el-form>
      <el-row>
        <el-button v-if="assignment.status === 1" type="primary" @click="publishAssignment('formRef')" style="margin-top:30px;margin-left:45%;">发布任务书</el-button>
        <el-button v-if="assignment.status === 2" type="success" @click="publishAssignment('formRef')" style="margin-top:30px;margin-left:45%;">更新任务书</el-button>
      </el-row>
    </el-card>
    <!-- 课题详情对话框 -->
    <el-dialog title="课题详情" :visible.sync="dialogVisible">
      <el-form label-width="80px" >
        <el-form-item label="课题名称">
          <el-input :value="subjectDetail.name" readonly style="width:90%"></el-input>
        </el-form-item>
        <el-form-item label="课题类型">
          <el-input :value="subjectDetail.type.label" readonly style="width:90%"></el-input>
        </el-form-item>
        <el-form-item label="课题来源">
          <el-input :value="subjectDetail.source.label" readonly style="width:90%"></el-input>
        </el-form-item> 
        <el-form-item label="课题简介">
          <el-input :value="subjectDetail.introduce" readonly type="textarea" :rows="6"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import {getAssignmentById, teachertPublishAssignment} from '../../axios/assignment'
  export default {
    name: 'TeacherAssignmentPublish',
    data(){
      return {
        assignmentVo:{
          assignment:{},
          sub:{}
        },
        dialogVisible: false,
        subjectDetail:{
          type:{}, source:{}
        },
        // 任务书数据
        assignment: { 
          stu: {},
          tea: {},
          sub: {}
        },
        rules: {
          research: [ { required: true, message: '请输入研究的主要内容', trigger: 'blur' } ],
          command: [ { required: true, message: '请输入涉及的知识和基本要求', trigger: 'blur' } ],
          goal: [  { required: true, message: '请输入预期目标', trigger: 'blur' } ],
          scheduling: [ { required: true, message: '请输入进度安排', trigger: 'blur' } ]
        }, 
      }
    },
    created(){
      this.getAssignmentData(this.$route.params.id)
    },
    methods:{
      getAssignmentData(assignmentId){ 
        // 发送后端请求，拿到指定id的任务书详情
        getAssignmentById(assignmentId).then(res => {
          if(res.success){
            this.assignmentVo = res.data
            this.assignment = res.data.assignment
            this.subjectDetail = res.data.sub
          } 
        })

        // 无后端，默认成功拿到了数据
        // this.assignment = {
        //   id: 2, 
        //   status: false,
        //   research: '我是前端的测试数据我是前端测试数据.......',
        //   command: 'JavaEE, SpringBoot, Redis, MySQL, vue, elementUI...',  // 涉及的知识和基本要求
        //   goal: '熟练掌握JavaWeb的相关知识，并了解技术前言框架的使用',
        //   scheduling: '第一周.....第二周....',
        //   attachment: '', // 附件下载地址
        //   publishTime: '2022-01-24', // 发布时间
        //   updateTiime: '2022-01-24', // 提交时间
        //   stu: {id: 6109118002, name: '李四'},
        //   tea: {id: 610911, name: '罗翔老师', job: '讲师', college: '信息工程学院', phone: '18989099909', email: '18989099909@qq.com'},
        //   sub: { // 对应毕设课题
        //           id: 2,
        //           name: '前端模拟数据测试',
        //           introduce: '测试测试测试测试测试测试',
        //           declareTime: '2021-01-21',
        //           source: {id: 1, label: '学生自拟'},
        //           type: {id: 1, label: '理论研究'},
        //           status: 1,
        //           stuId: 6109118002, 
        //           teaId: 610911, 
        //         } 
        // }
      },
      // 处理文件变化
      // handleChange (file) {
      //   // 最多选一个文件
      //   this.$refs.upload.uploadFiles = []
      //   this.$refs.upload.uploadFiles.push(file)
      // },
      // 处理文件上传成功
      // handleSuccess (res) {
      //   if (!res.data) return this.$message.error('上传文件失败')
      //   this.assignment.attachment = res.data.data 
      //   // 附件上传成功之后，对表单进行提交
      //   this.publishAssignmentForm()
      // },
      // 发布任务书
      publishAssignment(formRef){ 
        this.$refs[formRef].validate(valid =>{ 
          if(valid){ 
            this.$confirm('确认提交吗?', '系统提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then( () => { 
              this.publishAssignmentForm()
            }) 
          }else{
            this.$message.error('请按要求填写各项信息!')
          }
        })
      },
      publishAssignmentForm(){
        // 发送后端请求，
        console.log(this.assignment)
        teachertPublishAssignment(this.assignment).then(res => {
          if(res.success){
            this.$message.success('发布任务书成功')
            this.$router.push('/teacher/assignment')
          } 
        }) 
      }
    }
  }
</script> 

<style scoped>
  .el-form-item .el-input{
    width: 80%;
  }
  .el-form-item .el-textarea{
    width: 90%;
  }
</style>